<template>
	<view class="cj-slider" @mousemove="onSliMouseMove" @mouseup="onSliMouseUp">
		<view class="mouse-move" :style="{ height: moveHeight + 'rpx' }"></view>
		<view
			class="cj-slider__line"
			:class="[disabled ? 'cj-slider--disabled' : '']"
			:style="{
				backgroundColor: inactiveColor,
				height: height + 'rpx',
			}"
			@click="onClick"
		></view>
		<view
			class="cj-slider__gap"
			:style="[
				barStyle,
				{
					height: height + 'rpx',
					backgroundColor: activeColor,
				},
			]"
			@click="onClick"
		>
			<view class="cj-slider__button-wrap" @mousedown="onMouseDown(1, $event)" @mousemove="onMouseMove($event)" @mouseleave="onMouseLeave(1)" @mouseup="onMouseUp(1)" @touchstart="onTouchStart(1, $event)" @touchmove="onTouchMove(1, $event)" @touchend="onTouchEnd(1)" @touchcancel="onTouchEnd">
				<slot v-if="$slots.default || $slots.$default" />
				<view
					v-else
					class="cj-slider__button"
					:style="[
						blockStyle,
						{
							height: blockWidth + 'rpx',
							width: blockWidth + 'rpx',
							backgroundColor: blockColor,
						},
					]"
				></view>
			</view>
			<view class="cj-slider__button-wrap2" @mousedown="onMouseDown(2, $event)" @mousemove="onMouseMove($event)" @mouseleave="onMouseLeave(2)" @mouseup="onMouseUp(2)" @touchstart="onTouchStart(2, $event)" @touchmove="onTouchMove(2, $event)" @touchend="onTouchEnd(2)" @touchcancel="onTouchEnd">
				<slot v-if="$slots.default || $slots.$default" />
				<view
					v-else
					class="cj-slider__button"
					:style="[
						blockStyle,
						{
							height: blockWidth + 'rpx',
							width: blockWidth + 'rpx',
							backgroundColor: blockColor,
						},
					]"
				></view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * slider 滑块选择器
 * @property {Number | String} value 滑块默认值（默认[最小值,最大值]）
 * @property {Number | String} min 最小值（默认0）
 * @property {Number | String} max 最大值（默认100）
 * @property {Number | String} step 步长（默认1）
 * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
 * @property {Number | String} height 滑块条高度，单位rpx（默认6）
 * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
 * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
 * @property {String} blockColor 滑块颜色（默认#ffffff）
 * @property {Object} blockStyle 给滑块自定义样式，对象形式
 * @property {Boolean} disabled 是否禁用滑块(默认为false)
 * @property {Number | String} moveHeight 鼠标离开滑块仍可滑动的区域高度，单位rpx(默认100)
 * @event {Function} start 滑动触发
 * @event {Function} moving 正在滑动中
 * @event {Function} end 滑动结束
 * @example <cj-slider v-model="value" />
 */
export default {
	name: "cj-slider",
	props: {
		// 当前进度百分比值
		value: {
			type: Array,
			default: [],
		},
		// 是否禁用滑块
		disabled: {
			type: Boolean,
			default: false,
		},
		// 滑块宽度，高等于宽，单位rpx
		blockWidth: {
			type: [Number, String],
			default: 30,
		},
		// 最小值
		min: {
			type: [Number, String],
			default: 0,
		},
		// 最大值
		max: {
			type: [Number, String],
			default: 100,
		},
		// 步进值
		step: {
			type: [Number, String],
			default: 1,
		},
		// 滑块条高度，单位rpx
		height: {
			type: [Number, String],
			default: 6,
		},
		// 进度条的激活部分颜色
		activeColor: {
			type: String,
			default: "#2979ff",
		},
		// 进度条的背景颜色
		inactiveColor: {
			type: String,
			default: "#c0c4cc",
		},
		// 滑块的背景颜色
		blockColor: {
			type: String,
			default: "#ffffff",
		},
		// 用户对滑块的自定义颜色
		blockStyle: {
			type: Object,
			default() {
				return {}
			},
		},
		// 鼠标可离开滑块后仍能滑动的范围高度
		moveHeight: {
			type: [Number, String],
			default: "100",
		},
	},
	data() {
		return {
			mouseLeave: false, // 鼠标移出了滑块
			mouseType: 1, // 1 左滑块 2 右滑块
			mouseDown: false, // 鼠标按下
			startX: 0,
			status: "end",
			newValue: 0,
			distanceX: 0,
			startValue: 0,
			barStyle: {},
			sliderRect: {
				left: 0,
				width: 0,
			},
		}
	},
	created() {
		// 如果不是长度为2的数组,默认值为[最小值, 最大值]
		if (Object.prototype.toString.call(this.value) == "[object Array]" && this.value.length === 2) {
			this.updateValue(this.value[0], this.value[1], false)
		} else {
			this.$emit("input", Array(this.min, this.max))
		}
	},
	mounted() {
		// 获取滑块条的尺寸信息
		this.$uGetRect(".cj-slider").then(rect => {
			this.sliderRect = rect
		})
	},
	methods: {
		onTouchStart(type, event) {
			if (this.disabled) return
			this.startX = 0
			// 触摸点集
			let touches = event.touches[0]
			// 触摸点到屏幕左边的距离
			this.startX = touches.clientX
			// 此处的this.value虽为props值，但是通过$emit('input')进行了修改
			this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1])
			// 标示当前的状态为开始触摸滑动
			this.status = "start"
		},
		onMouseDown(type, event) {
			if (this.disabled) return
			this.mouseDown = true
			this.mouseType = type
			this.startX = event.clientX || 0
			this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1])
			this.status = "start"
		},
		onTouchMove(type, event) {
			if (this.disabled) return
			// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
			// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
			if (this.status == "start") this.$emit("start")
			let touches = event.touches[0]
			// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
			this.distanceX = touches.clientX - this.sliderRect.left
			// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
			// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
			this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
			this.status = "moving"
			// 发出moving事件
			this.$emit("moving")
			if (type === 1) {
				this.updateValue(this.newValue, this.format(this.value[1]), true)
			} else {
				this.updateValue(this.format(this.value[0]), this.newValue, true)
			}
		},
		onMouseMove(event) {
			if (!this.mouseDown) return
			if (this.disabled) return
			if (this.status == "start") this.$emit("start")
			// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
			this.distanceX = event.clientX - this.sliderRect.left
			// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
			// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
			this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
			this.status = "moving"
			// 发出moving事件
			this.$emit("moving")
			if (this.mouseType === 1) {
				this.updateValue(this.newValue, this.format(this.value[1]), true)
			} else {
				this.updateValue(this.format(this.value[0]), this.newValue, true)
			}
		},
		onMouseLeave(type) {
			this.mouseLeave = true
		},
		onTouchEnd(type) {
			if (this.disabled) return
			if (this.status === "moving") {
				if (type === 1) {
					this.updateValue(this.newValue, this.format(this.value[1]), true)
				} else {
					this.updateValue(this.format(this.value[0]), this.newValue, true)
				}
				this.$emit("end")
			}
			this.status = "end"
		},
		onMouseUp(type) {
			this.mouseDown = false
			this.mouseLeave = false
			if (this.disabled) return
			if (this.status === "moving") {
				if (type === 1) {
					this.updateValue(this.newValue, this.format(this.value[1]), true)
				} else {
					this.updateValue(this.format(this.value[0]), this.newValue, true)
				}
				this.$emit("end")
			}
			this.status = "end"
		},
		onSliMouseUp() {
			// 鼠标在滑块范围内松开
			this.mouseDown = false
			this.mouseLeave = false
		},
		onSliMouseMove(e) {
			// 监听整个滑动内的鼠标移动，因为PC端只能监听到小滑块内的移动，移动过快鼠标移出了小滑块则移动失败。
			if (!this.mouseDown) return
			if (!this.mouseLeave) return
			this.onMouseMove(e)
		},
		updateValue(value, value2, drag) {
			// 去掉小数部分，同时也是对step步进的处理
			const widthB1 = this.format(value)
			const widthB2 = this.format(value2)
			const widthB1B = Math.round(((widthB1 - this.min) * 100) / (this.max - this.min))
			const widthB2B = Math.round(((widthB2 - this.min) * 100) / (this.max - this.min))
			// 不允许滑动的值超过max最大值，百分比也不能超过100
			if (widthB1 > widthB2 || widthB2 > this.max || widthB2B > 100) return
			// 设置移动的百分比值
			let barStyle = {
				width: widthB2B - widthB1B + "%",
				left: widthB1B + "%",
			}
			// 移动期间无需过渡动画
			if (drag == true) {
				barStyle.transition = "none"
			} else {
				// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
				delete barStyle.transition
			}
			// 修改value值，这里使用change改变，使用input H5桌面端会卡死，
			this.$emit("input", Array(widthB1, widthB2))
			this.barStyle = barStyle
		},
		format(value) {
			// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
			return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
		},
		onClick(event) {
			if (this.disabled) return
			// 直接点击滑块的情况，计算方式与onTouchMove方法相同
			const widthB1 = this.value[0]
			const widthB2 = this.value[1]
			const value = this.format(((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this.min) + this.min)
			if (value < widthB1 || value - widthB1 <= widthB2 - value) {
				// 点击位置在左滑块的左边 || 点击位置在中间，且靠近左滑块 => 移动左滑块到该位置
				this.updateValue(value, widthB2, false)
			} else {
				// 点击位置在右滑块的右边 || 点击位置在中间，且靠近右滑块 => 移动右滑块到该位置
				this.updateValue(widthB1, value, false)
			}
		},
		$uGetRect(selector, all) {
			// $uGetRect为uView自带的节点查询简化方法
			return new Promise(resolve => {
				uni.createSelectorQuery()
					.in(this)
					[all ? "selectAll" : "select"](selector)
					.boundingClientRect(rect => {
						if (all && Array.isArray(rect) && rect.length) {
							resolve(rect)
						}
						if (!all && rect) {
							resolve(rect)
						}
					})
					.exec()
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.cj-slider {
	position: relative;
	// background-color: #ebedf0;

	&__line {
		position: absolute;
		width: 100%;
		background-color: #ebedf0;
	}

	&__gap {
		position: relative;
		// 动画有bug，暂时取消
		// transition: width 0.2s;
		background-color: #1989fa;
	}

	&__button {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		background-color: #fff;
		cursor: pointer;
	}

	&__button-wrap {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate3d(-50%, -50%, 0);
	}

	&__button-wrap2 {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate3d(50%, -50%, 0);
	}
}

.cj-slider--disabled {
	opacity: 0.5;
}

.mouse-move {
	position: fixed;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	opacity: 0;
}
</style>
